<template>
  <d2-container>
    <div class="flex-1 ml-2">
      <el-table :data="userList" border stripe>
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="65" />
        <el-table-column align="center" label="用户名" prop="username" width="120" />
        <el-table-column align="center" label="手机号" prop="phone" width="120" />
        <el-table-column align="center" label="邮箱" prop="email" width="125" />
        <el-table-column align="center" label="标识" prop="mark_id" width="95" />
        <el-table-column align="center" label="职务" prop="duties_name" width="135" />
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handlAutheEdit(scope.row)"
              v-if="scope.row.is_superuser == false">权限管理</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)" v-if="scope.row.is_superuser == false">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" title="添加/编辑职务">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <div style="width: 50%;">
            <el-input v-model="form.username"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <div style="width: 50%;">
            <el-input v-model="form.email"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <div style="width: 50%;">
            <el-input v-model="form.phone"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="管理员" prop="is_staff">
          <el-switch v-model="form.is_staff"></el-switch>
        </el-form-item>
        <el-form-item label="职务" prop="duties">
          <el-select v-model="form.duties" placeholder="请选择职务">
            <el-option v-for="item in dutiesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogAuthVisible" width="60%" title="设置权限">
      <el-form :model="formAuth" ref="form" label-width="80px">
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="商品模块" prop="is_product">
            <el-switch v-model="formAuth.is_product"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="商品管理" prop="is_productmanag">
              <el-switch v-model="formAuth.is_productmanag"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="品牌管理" prop="is_productbrand">
              <el-switch v-model="formAuth.is_productbrand"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="分类管理" prop="is_productcategory">
              <el-switch v-model="formAuth.is_productcategory"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="促销管理" prop="is_promotion">
            <el-switch v-model="formAuth.is_promotion"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="摇奖模块" prop="is_lottery">
              <el-switch v-model="formAuth.is_lottery"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="图片管理" prop="is_picture">
            <el-switch v-model="formAuth.is_picture"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="广告管理" prop="is_adver">
              <el-switch v-model="formAuth.is_adver"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="广告分类" prop="is_classification">
              <el-switch v-model="formAuth.is_classification"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="订单模块" prop="is_order">
            <el-switch v-model="formAuth.is_order"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="商品订单" prop="is_proOrder">
              <el-switch v-model="formAuth.is_proOrder"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="内容管理" prop="is_content">
            <el-switch v-model="formAuth.is_content"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="文章权限" prop="is_article">
              <el-switch v-model="formAuth.is_article"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="文章分类" prop="is_articleClass">
              <el-switch v-model="formAuth.is_articleClass"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="新闻权限" prop="is_news">
              <el-switch v-model="formAuth.is_news"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="新闻分类" prop="is_newsCategory">
              <el-switch v-model="formAuth.is_newsCategory"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="小说管理" prop="is_managenovel">
            <el-switch v-model="formAuth.is_managenovel"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="小说章节" prop="is_chapter">
              <el-switch v-model="formAuth.is_chapter"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="小说权限" prop="is_novel">
              <el-switch v-model="formAuth.is_novel"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="小说分类" prop="is_novelCategory">
              <el-switch v-model="formAuth.is_novelCategory"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="解题模块" prop="is_answer">
            <el-switch v-model="formAuth.is_answer"></el-switch>
          </el-form-item>
        </div>
        <div class="row-ac ml-4">
          <div>
            <el-form-item label="试卷权限" prop="is_examination">
              <el-switch v-model="formAuth.is_examination"></el-switch>
            </el-form-item>
          </div>
          <div class="ml-2">
            <el-form-item label="类型权限" prop="is_answertypes">
              <el-switch v-model="formAuth.is_answertypes"></el-switch>
            </el-form-item>
          </div>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="商户模块" prop="is_merchant">
            <el-switch v-model="formAuth.is_merchant"></el-switch>
          </el-form-item>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="会员管理" prop="is_users">
            <el-switch v-model="formAuth.is_users"></el-switch>
          </el-form-item>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="网站设置" prop="is_website">
            <el-switch v-model="formAuth.is_website"></el-switch>
          </el-form-item>
        </div>
        <div class="flex-1" style="background-color: aliceblue;">
          <el-form-item label="财务管理" prop="is_finance">
            <el-switch v-model="formAuth.is_finance"></el-switch>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAuthVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAuthForm">保存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>
<script>
  import {
    userListUrl,
    userUrl,
    dutiesUrl,
    moduleauthCreateUrl,
    moduleauthDetailUrl,
    moduleauthUpdateUrl,
  } from "@/utils/interface"
  import {
    patch
  } from '@/utils/request'
  export default {
    name: 'userList',
    data() {
      return {
        dialogVisible: false,
        userList: [],
        queryInfo: {
          is_staff: 'True'
        },
        form: {
          username: '',
          email: '',
          phone: '',
          is_staff: '',
          duties: '',
        },
        rules: {
          username: [{
            required: true,
            message: '请输入职务名称',
            trigger: 'blur'
          }]
        },
        dutiesList: [],
        takeUserId: '',
        formAuth: {
          user: '',
          is_product: false,
          is_productmanag: false,
          is_productbrand: false,
          is_productcategory: false,
          is_promotion: false,
          is_lottery: false,
          is_picture: false,
          is_adver: false,
          is_classification: false,
          is_order: false,
          is_proOrder: false,
          is_content: false,
          is_articleClass: false,
          is_article: false,
          is_newsCategory: false,
          is_news: false,
          is_managenovel: false,
          is_chapter: false,
          is_novel: false,
          is_novelCategory: false,
          is_answer: false,
          is_examination: false,
          is_answertypes: false,
          is_merchant: false,
          is_users: false,
          is_website: false,
          is_finance: false,
        },
        dialogAuthVisible: false,
        moduleauthId: ''
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getUserList()
        this.getDuties()
      },
      getUserList() {
        this.$get(userListUrl, this.queryInfo).then(res => {
          this.userList = res.data.data.list
        })
      },
      getDuties() {
        this.$get(dutiesUrl).then(res => {
          this.dutiesList = res.data.data.list
        })
      },
      clickCancel() {
        this.dialogVisible = false
        this.form = {}
      },
      submitForm() {
        patch(userUrl + this.takeUserId + '/', this.form).then(res => {
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getUserList()
        })
      },
      handleEdit(item) {
        this.dialogVisible = true
        this.takeUserId = item.id
        this.$get(userUrl + item.id + '/').then(res => {
          this.form = {
            username: res.data.username,
            email: res.data.email,
            phone: res.data.phone,
            is_staff: res.data.is_staff,
            duties: res.data.duties,
          }
        })
      },
      handlAutheEdit(item) {
        if (item.moduleauths.length == 0) {
          this.formAuth.user = item.id
          this.$post(moduleauthCreateUrl, this.formAuth).then(res => {
            if (res.data.code == 200) {
              this.dialogAuthVisible = true
              this.moduleauthId = res.data.data.id
              this.getModuleauthDetail(this.moduleauthId)
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }
          })
        } else {
          this.dialogAuthVisible = true
          this.moduleauthId = item.moduleauths[0].id
          this.getModuleauthDetail(this.moduleauthId)
        }
      },
      getModuleauthDetail(moduleauthId) {
        this.$get(moduleauthDetailUrl + moduleauthId + '/').then(res => {
          if (res.data.code == 200) {
            this.formAuth = {
              user: res.data.data.user,
              is_product: res.data.data.is_product,
              is_productmanag: res.data.data.is_productmanag,
              is_productbrand: res.data.data.is_productbrand,
              is_productcategory: res.data.data.is_productcategory,
              is_promotion: res.data.data.is_promotion,
              is_lottery: res.data.data.is_lottery,
              is_picture: res.data.data.is_picture,
              is_adver: res.data.data.is_adver,
              is_classification: res.data.data.is_classification,
              is_order: res.data.data.is_order,
              is_proOrder: res.data.data.is_proOrder,
              is_content: res.data.data.is_content,
              is_articleClass: res.data.data.is_articleClass,
              is_article: res.data.data.is_article,
              is_newsCategory: res.data.data.is_newsCategory,
              is_news: res.data.data.is_news,
              is_managenovel: res.data.data.is_managenovel,
              is_chapter: res.data.data.is_chapter,
              is_novel: res.data.data.is_novel,
              is_novelCategory: res.data.data.is_novelCategory,
              is_answer: res.data.data.is_answer,
              is_answertypes: res.data.data.is_answertypes,
              is_examination: res.data.data.is_examination,
              is_merchant: res.data.data.is_merchant,
              is_users: res.data.data.is_users,
              is_website: res.data.data.is_website,
              is_finance: res.data.data.is_finance,
            }
          }
        })
      },
      submitAuthForm() {
        this.$put(moduleauthUpdateUrl + this.moduleauthId + '/', this.formAuth).then(res => {
          if (res.data.code == 200) {
            this.dialogAuthVisible = false
            this.formAuth = {}
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      }
    }
  }
</script>
